<template>
  <div class="app-container calendar-list-container" element-loading-text="正在导出数据">
  <!-- filter 条件查询 -->

  <div class="filter-container">
    <div style="display:flex;margin-bottom: 10px;" >
        <el-select
        clearable
        filterable
        v-model="param.workCenter" 
        placeholder="请选择工作中心" 
        @focus="getCenterList" 
        style="margin-right:15px;width: 150px">
            <el-option 
            :value="item" 
            :label="item" v-for="(item,index) in this.centerList" 
            :key="index"/>
        </el-select>
        <el-select
        clearable
        filterable
        v-model="param.sectionNo" 
        placeholder="请选择线体名称" 
        style="margin-right:15px;width: 150px">
            <el-option 
            :value="item.sectionNo" 
            :label="item.sectionAbbreviation" v-for="(item,index) in list" 
            :key="index"/>
        </el-select>
          
          <el-select
            filterable
            clearable
            v-model="countersignOptions"
            :value-key="'jobNumber'" 
            placeholder="责任人"
            @change="countersignChange"
            style="margin-right: 15px;width: 150px"
          >
        <el-option
          v-for="item,index in userNameList"
          :key="index"
          :label="item.userName"
          :value="item"
        /></el-select>

        <el-date-picker
        v-model="param.years"
        type="year"
        placeholder="请选择年"
        value-format="yyyy"
        style="margin-right:15px;width: 100px">
        </el-date-picker>
        
        <el-date-picker
        v-model="param.month"
        type="month"
        value-format="MM"
        format="MM"
        placeholder="请选择月"
        style="margin-right:15px;width: 100px">
        </el-date-picker>

          <el-button type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
          <el-button
              type="button"
              v-waves
              class="el-button el-button--warning"
              @click="cancelSubmit"
          >
          重置</el-button>
      </div>
  </div>
  <div ref="bottom" style="width: 1500px; height: 400px;"></div>  
</div>
</template>

<script>
import * as echarts from 'echarts'
import { problemDistribution } from '@/api/problem.js'
import { getCenter } from '@/api/workSection.js'
import mixin from '@/utils/mixin.js'
export default {
  name: 'problemDistribution',
  mixins: [mixin],
   props: {
    // 带有默认值的数组
    list: {
      type: Array,
      default: () => [] // 对象/数组的默认值必须是函数
    }
  },
  data () {
      return {
          param: {
            workCenter: 'EMS总装车间',                      
            jobNumber: '',
            sectionNo: '',
            years: this.getCurrentYear(),        //年
            month: this.getCurrentMonth(),       //月   
          },
          centerList: [],
          loading: false, 
          userInfo: this.$store.state.user.userInfo,
          nameList:[],
          dataList:[],
          countersignOptions:{},   // 标准人员
      }
  },
  computed: {
    inputWid() {
      return function (value) {
          if(!value || (value.length <= 10)){
            return '150px'
          } else {
            return (150 + (String(value).length-10)*6) + 'px'
          }
      }
    },
  },
  computed: {
     
  },
  methods: {
    countersignChange(){
            this.param.jobNumber = this.countersignOptions.jobNumber
        },
    // 获取当前年份
    getCurrentYear() {
        return new Date().getFullYear().toString();
      },
      // 获取当前月份
      getCurrentMonth() {
        const month = new Date().getMonth() + 1;
        return month < 10 ? '0' + month : month.toString();
      },
      // 获取工作中心
     async getCenterList() {
          let {data} = await getCenter()
          this.centerList = data
        },
      getData(){
        console.log(this.param)
        this.handleFilter()
      },
      async handleFilter() {
        let query = {}
        if(this.param.workCenter){ query.workCenter = this.param.workCenter}
        if(this.param.years){ query.years = this.param.years}
        if(this.param.month){ query.month = this.param.month}
        if(this.param.jobNumber){ query.jobNumber = this.param.jobNumber}
        if(this.param.sectionNo){ query.sectionNo = this.param.sectionNo}
        let res = await problemDistribution(query)
        console.log(res);
        if(res.code != 1 || !res.data.series){
          this.nameList = []
          this.dataList = []
        } else {
          this.nameList = res.data.names
          res.data.series.forEach(item =>{
            item.type = 'bar',
            item.stack = 'Ad',
            this.emphasis = {
              focus: 'series'
            }
          })
          this.dataList = res.data.series
        }
        this.bottomEcharts()
      },
      cancelSubmit(){
          this.param = {     
          }
      },
      // 下图
      bottomEcharts(){
        this.bottomT = echarts.init(this.$refs.bottom)
        // 基于准备好的dom，初始化echarts实例
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            orient: 'vertical',
            top: '20%',
            right: '10%',
          },
          grid: {
            width: '1100px',
            height: '300px',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.nameList
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: this.dataList
        };
        this.bottomT.setOption(option,true)
      }
  },
  // 进入页面获取table信息
  mounted() {
      this.handleFilter()
      this.focusUserName()
  }
}
</script>

<style>

.btn-add{
  margin-bottom: 28px;
}

.ul-item{
width: 85%;
}
</style>
